<template>
	<view style="color: #3497f5;">
		<view class="title" v-if="question.Title">{{curIndex}}、{{question.Title}}</view>
		<view class="options">
			<view class="optionItem"
				:class="{optionItemAct: checkIndex === idx, slideBottom: toggleDelay}"
				hover-class="optionItemAct"
				@click="choose(idx)"
				:key="idx" v-for="(item, idx) in question.stems">
				{{item.index}}、{{item.content}}
				<image class="decorate1" src="../static/img/topLeft.png"></image>
				<image class="decorate2" src="../static/img/bottomLeft.png"></image>
				<image class="decorate3" src="../static/img/topRight.png"></image>
				<image class="decorate4" src="../static/img/bottomRight.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				checkIndex: -1,
				undo: true,
				toggleDelay: false
			}
		},
		props: {
			question:{
				type: Object,
				default: () => {
					return {}
				}
			},
			curIndex:{
				type: Number,
				default: 1
			},
			finish:{
				type: Boolean,
				default: false
			}
		},
		watch:{
			question(newVal, oldVal){
				if(newVal){
					// this.curIndex = -1
					this.checkIndex = -1
					this.undo = true
				}
				// if(newVal.content && !oldVal.content){
				this.toggleDelay= true;
				setTimeout(()=>{
					this.toggleDelay= false
				}, 1000)
				// }
			}
		},
		methods:{
			choose(index){
				if(this.finish){
					return
				}
				if(this.undo){
					this.checkIndex = index
					this.undo = false
					this.$emit('choose', index)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 42rpx;
		font-weight: bold;
		position: relative;
		// &:before{
		// 	content: '';
		// 	position: absolute;
		// 	left: -16px;
		// 	width: 8px;
		// 	height: 28px;
		// 	border-radius: 4px;
		// 	background: #2c95fa;
		// }
	}
	.options{
		margin-top: 35rpx;
		.optionItem{
			font-size: 44rpx;
			font-weight: bold;
			margin-bottom: 30rpx; 
			padding: 25rpx 20rpx;
			border-radius: 28rpx;
			background: #ffffff;
			word-break: break-all;
			box-shadow: 7rpx 7rpx 5rpx rgba(8,200,244,0.12);
			image{
				position: absolute;
				opacity: 0;
			}
			.decorate1{
				top: -18rpx;
				left: -20rpx;
				width: 51rpx;
				height: 64rpx;
			}
			.decorate2{
				bottom: -15rpx;
				left: -17rpx;
				width: 50rpx;
				height: 55rpx;
			}
			.decorate3{
				top: -5rpx;
				right: -4rpx;
				width: 75rpx;
				height: 50rpx;
			}
			.decorate4{
				bottom: 3rpx;
				right: -20rpx;
				width: 61rpx;
				height: 46rpx;
			}
		}
		.slideBottom{
			animation: fadeFromBottom 1s ease-in;
		}
		.optionItemAct{
			position: relative;
			color: #ffffff;
			background-color: #fc8144;
			image{
				opacity: 1;
			}
		}
	}
	@keyframes fadeFromBottom{
		0%{
			opacity: 0;
			transform: translateY(100%);
		}
		100%{
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>
